<template>
    <!-- <view class="hot w-686 h-390 mt-32">
        <image :src="getBaseUrl() + '/admin-api/system/file/19/get/c6009d928c873ea0e7fe9428552706637ba5ad83e3b3884b8c9169dfc45de3a5.png'" class="w-686 h-390"></image>
        <view class="content pt-28 pl-28">
            <view class="f ai-c jc-s-b">
                <view class="f ai-c">
                    <image src="http://cwht.ricecs.cn/app/index/hot.png" class="w-35 h-35 mr-12"></image>
                    <view class="color fa-36 fw-600">热门活动</view>
                </view>
                <view class="f ai-c pr-33">
                    <view class="fs-24 color mr-9"> 更多活动</view>
                    <u-icon name="arrow-right" size="10" color="#FF1414"></u-icon>
                </view>
            </view>
            <u-scroll-list :indicator="false">
                <view v-for="(item, index) in 5" :key="index" class="mt-20 pt-12 mr-12">
                    <view class="w-220 line-box h-256">
                        <image src="../../static/logo.png" class="w-f h-124"></image>
                        <view class="fs-26 fw-600 text-color4 text-ellipsis-1 ph-12 mt-12">狗狗洗护洗护洗护洗护·SP</view>
                        <view class="ph-12 mt-4 fs-26 fw-600 color">¥ 80.00</view>
                        <view class="ph-12 mt-4 fs-20 text-color3">月售129</view>
                    </view>
                </view>
            </u-scroll-list>
        </view>
    </view> -->
    <!-- 秒杀 -->
    <view class="hot w-f h-380 mt-32">
        <image
            :src="getBaseUrl() + '/admin-api/system/file/19/get/c6009d928c873ea0e7fe9428552706637ba5ad83e3b3884b8c9169dfc45de3a5.png'"
            class="w-f h-380"
        ></image>
        <view class="content pt-20 pl-28 pr-28">
            <view class="f ai-c jc-s-b">
                <view class="f ai-c">
                    <image src="http://cwht.ricecs.cn/app/shop/seckill.png" class="w-36 h-36 mr-12"></image>
                    <view class="color fa-36 fw-600">热门活动</view>
                </view>
                <view class="f ai-c pr-33" @click="toSeckill">
                    <view class="fs-24 color mr-9"> 更多活动</view>
                    <u-icon name="arrow-right" size="10" color="#FF1414"></u-icon>
                </view>
            </view>
            <u-scroll-list :indicator="false">
                <view v-for="(item, index) in seckillList" :key="index" class="mt-5 pt-8 mr-12" @click="toDetail(item, 'seckill')">
                    <view class="w-220 line-box ">
                        <!-- <view class="f ai-c seckill w-108 h-32 b-4 jc-c">
                            <image src="http://cwht.ricecs.cn/app/shop/ms.png" class="w-22 h-22 mr-4"></image>
                            <view class="fs-22 text-color5">秒杀中</view>
                        </view> -->
                        <image :src="item.picUrl" class="w-f h-124" mode="aspectFill"></image>
                        <view class="fs-24 fw-600 text-color4 text-ellipsis-1 ph-6 mt-6">{{ item.name }}</view>
                        <view class="ph-12 mt-4 fs-26 fw-600 color">¥{{ item.price }}</view>
                        <view class="ph-12 mt-4 fs-20 text-color3">月售{{ item.salesCount||0 }}</view>
                    </view>
                </view>
            </u-scroll-list>
        </view>
    </view>
</template>
<script setup lang="ts">
import { toRefs } from 'vue';
import { getBaseUrl } from '@/utils/env';
const props = defineProps({
    seckillList: {
        type: Array,
        default: 'back',
    },
});
const { seckillList } = toRefs(props);
//商品详情
function toDetail(data: any, type: string) {
    uni.navigateTo({
        url: `/pages_shop/productDetails/index?id=${data.id}&status=${type}`,
    });
}
const toSeckill = () => {
    uni.navigateTo({
        url: '/pages_shop/recommend?type=1',
    });
};
</script>
<style lang="scss" scoped>
.picUrl {
    border-radius: 16rpx 16rpx 0 0;
}
.new {
    .content {
        background: #fff;
        .bot {
            background-image: linear-gradient(0deg, #faf3e6 0%, #ffffff 100%);
            border-radius: 0 0 18rpx 18rpx;
        }
        .top {
            background-image: linear-gradient(#faf3e6, #ffffff);
            border-radius: 18rpx 18rpx 0 0;
        }
        .old-price {
            text-decoration: line-through;
        }
    }
}
.hot {
    position: relative;
    .content {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        .line-box {
            background: #fff;
            border-radius: 12rpx;
            position: relative;
            image {
                border-radius: 12rpx 12rpx 0 0;
            }
            .seckill {
                background: #f54040;
                position: absolute;
                right: 8rpx;
                top: 7rpx;
            }
            .teamwork {
                position: absolute;
                right: 8rpx;
                top: 7rpx;
                background: #ff7744;
            }
        }
    }
    .color {
        color: #ff1414;
    }
    .more {
        color: #ff6e00;
    }
    .teamwork-color {
        color: #ff7744;
    }
    .bargain-color {
        color: #ff00ee;
    }
}
</style>
